<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>创建工单</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="form-container" shadow="never">
    <el-form :model="workorderList"
             :rules="rules"
             :inline="true"
             ref="workorderListFrom"
             label-width="150px">

      <div>
        <el-form-item label="客户姓名：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.customername">
          </el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="性别"
            suffix-icon="el-icon-date"
            v-model="workorderList.sex">
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="证件类型：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.certificatetype">
          </el-input>
        </el-form-item>
        <el-form-item label="证件号码：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.centificatenumber">
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="手机号：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.telephone">
          </el-input>
        </el-form-item>
        <el-form-item label="微信白名单：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.wechatwhite">
          </el-input>
        </el-form-item>
        <el-form-item label="QQ白名单：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.qqwhile">
          </el-input>
        </el-form-item>
      </div>
      <div >
        <el-form-item label="开户渠道：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.openchannel">
          </el-input>
        </el-form-item>
        <el-form-item label="客群分类：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.customertype">
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="进线渠道：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.comeinchannel">
          </el-input>
        </el-form-item>
        <el-form-item label="来电号码：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.callphone">
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="处理时效：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.periods">
          </el-input>
        </el-form-item>
        <el-form-item label="紧急程度：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.urgelevel">
          </el-input>
        </el-form-item>
        <el-form-item label="问题类型：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.problemtype">
          </el-input>
        </el-form-item>
      </div>

      <!--<div>
        <el-form-item label="流转对象：">
          <el-select v-model="workorderList.parentId"
                     placeholder="请选择分类">
            <el-option
              v-for="item in selectworkorderListList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组成员：">
          <el-select v-model="workorderList.parentId"
                     placeholder="请选择分类">
            <el-option
              v-for="item in selectworkorderListList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>-->
      <div>
        <el-form-item label="问题描述：">
          <el-input
            size="small" style="width: 10vw"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="workorderList.description">
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          style="width: 20%"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('workorderListFrom')">提交</el-button>
          <!--<el-button v-if="!isEdit" @click="resetForm('workorderListFrom')">取消</el-button>-->
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  </div>
</template>

<script>

  import axios from 'axios';
    export default {
        name: "OrderMake",
        data(){
          return{
            workorderList: {
              customername: '',
              sex: '',
              certificatetype: '',
              centificatenumber: '',
              telephone: '',
              wechatwhite: '',
              qqwhile: '',
              openchannel: '',
              customertype:'',
              comeinchannel:'',
              telephone:'',
              periods:'',
              urgelevel:'',
              problemtype:''
            },
            /*selectworkorderListList:{

            },*/
            rules:{

            },
            /*workorderList:Object.assign({},defaultWorkorderList),*/
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

          }
        },
      methods: {
        // handleRemove(file, fileList) {
        //   console.log(file, fileList);
        // },
        // handlePreview(file) {
        //   console.log(file);
        // },
        // handleExceed(files, fileList) {
        //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        // },
        // beforeRemove(file, fileList) {
        //   return this.$confirm(`确定移除 ${ file.name }？`);
        // },

        onSubmit(workorderList) {

          console.log('submit!');
          console.log(this.workorderList);
          axios.post("/api/workorder/insert",this.workorderList)
            .then((res)=>{
              console.log(workorderList);
              console.log(res.data);

              if (res.code=200){
                alert("操作成功")
              }else {
                alert("操作失败")
              }
            })
        }


      }
    }
</script>

<style scoped>

</style>
